<template>
  <el-row type="flex" justify="space-between" class="container">
    <div class="main">
      <!-- 面包屑标题 -->
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="/post">旅游攻略</el-breadcrumb-item>
          <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 文章大标题 -->
      <h1>{{ detail.title }}</h1>

      <!-- 文章信息 -->
      <div class="post-info">
        <span>攻略：{{ detail.created_at | timestamp }}</span>
        <span>阅读：{{ detail.watch }}</span>
      </div>

      <!-- 文章内容 -->
      <div class="post-content" v-html="detail.content"></div>

      <!-- 文章分享 -->
      <div class="post-ctrl">
        <el-row type="flex" justify="center">
          <div class="ctrl-item">
            <i class="iconfont icon-pinglun"></i>
            <p>评论({{ commentsTotal }})</p>
          </div>

          <!-- 收藏 -->
          <div class="ctrl-item" @click="handleStar">
            <i
              class="iconfont"
              :class="{
                'icon-jiaxingshoucang': !isFavorited,
                'icon-yishoucang': isFavorited,
              }"
            ></i>
            <p>{{ isFavorited ? "已收藏" : "收藏" }}</p>
          </div>
          <!-- <div class="ctrl-item" @click="handleStar" >
            <i class="iconfont icon-jiaxingshoucang" ></i>
            <p>收藏</p>
          </div> -->

          <!-- 分享 -->
          <div class="ctrl-item" @click="handleShare">
            <i class="iconfont icon-fenxiang"></i>
            <p>分享</p>
          </div>
          <!-- 分享弹窗 -->
          <el-dialog
            title="分享文章"
            :visible.sync="shareDialogVisible"
            width="30%"
          >
            <div style="text-align: center">
              <p>使用以下链接分享这篇文章：</p>
              <el-input type="text" :value="currentUrl" readonly>
                <template #append>
                  <el-button
                    type="text"
                    icon="el-icon-copy"
                    @click="copyToClipboard"
                    >复制</el-button
                  >
                </template>
              </el-input>
            </div>
          </el-dialog>
          <!-- <div class="ctrl-item" @click="$message.warning('暂不支持分享')">
            <i class="iconfont icon-fenxiang"></i>
            <p>分享</p>
          </div> -->

          <!-- 点赞 -->
          <div class="ctrl-item" @click="handleLike">
            <i class="iconfont icon-dianzan"></i>
            <p likes-count>({{ likes }})</p>
          </div>
        </el-row>
      </div>

      <!-- 文章评论 -->
      <div class="cmt-wrapper">
        <h4 class="cmt-title">评论</h4>

        <el-tag
          closable
          type="info"
          class="replyTag"
          v-if="reply.nickname"
          @close="handleCloseReply"
        >
          回复 @{{ reply.nickname }}
        </el-tag>

        <!-- 评论输入框 -->
        <div class="cmt-input" ref="cmtInput">
          <el-input
            type="textarea"
            resize="none"
            placeholder="说点什么吧..."
            v-model="cmtForm.content"
          >
          </el-input>
        </div>
        <el-row type="flex" justify="space-between" class="cmt-input-ctrls">
          <div class="cmt-pics">
            <el-upload
              :action="$axios.defaults.baseURL + `/upload`"
              list-type="picture-card"
              name="files"
              :file-list="cmtForm.pics"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
          <div>
            <el-button
              type="primary"
              size="mini"
              class="cmt-submit"
              @click="handleCmtSubmit"
            >
              提交
            </el-button>
          </div>
        </el-row>

        <!-- 无评论时 -->
        <div class="cmt-empty" v-if="!commentsTotal">
          暂无评论，赶紧抢占沙发！
        </div>

        <!-- 评论列表 -->
        <div class="cmt-list" v-if="commentsTotal">
          <div class="cmt-item" v-for="(item, index) in comments" :key="index">
            <div class="cmt-info">
              <img
                :src="$axios.defaults.baseURL + item.account.defaultAvatar"
              />
              {{ item.account.nickname }}
              <i>{{ item.created_at | timestamp }}</i>
              <span>{{ item.level }}</span>
            </div>
            <div class="cmt-content">
              <!-- 评论楼层 -->
              <CommentFloor
                v-if="item.parent"
                :comment="item.parent"
                @preview="handlePictureCardPreview"
                @reply="handleReply"
              />

              <div class="cmt-new">
                <p class="cmt-message">
                  {{ item.content }}
                </p>
                <el-row type="flex">
                  <div
                    class="cmt-pic"
                    v-for="(pic, picIndex) in item.pics"
                    :key="picIndex"
                  >
                    <img
                      :src="$axios.defaults.baseURL + pic.url"
                      @click="handlePictureCardPreview(pic)"
                    />
                  </div>
                </el-row>
                <div class="cmt-ctrl">
                  <a href="javascript:;" @click="handleReply(item)">回复</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <el-row
          type="flex"
          justify="center"
          v-if="commentsTotal"
          style="margin-top: 10px"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Math.floor(start / limit) + 1"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="commentsTotal"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>

    <div class="aside">
      <!-- 推荐文章 -->
      <h4 class="aside-title">相关攻略</h4>
      <div class="recommend-list">
        <nuxt-link
          :to="`/post/detail?id=${item.id}`"
          class="recommend-item"
          v-for="(item, index) in recommends"
          :key="index"
        >
          <el-row type="flex" class="post-imgText">
            <el-row
              type="flex"
              align="middle"
              class="post-img"
              v-if="item.images[0]"
            >
              <img :src="item.images[0]" alt="" />
            </el-row>
            <div class="post-text">
              <div>
                {{ item.title }}
              </div>
              <p>{{ item.created_at | timestamp }} 阅读 {{ item.watch }}</p>
            </div>
          </el-row>
        </nuxt-link>
      </div>
    </div>
  </el-row>
</template>

<script>
import CommentFloor from "@/components/post/commentFloor";
import moment from "moment";

export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      detail: {},
      comments: [],
      commentsTotal: 0,
      likes: 0, //点赞
      isFavorited: false, //收藏
      shareDialogVisible: false, //分享
      currentUrl: "", // 初始化URL为空字符串

      // filters
      start: 0,
      limit: 5,

      // comment form
      cmtForm: {
        content: "",
        pics: [],
      },

      reply: {},
      recommends: [],
    };
  },

  // Vue组件生命周期钩子，在组件创建时执行
  created() {
    const { id } = this.$route.query;
    this.loadLikes(id);

    this.$axios({
      url: `/posts/${id}`,
    }).then((res) => {
      // 设置文章详情在请求成功后
      const { data } = res;
      this.detail = data;
      // 读取并设置收藏状态
      let storedItem = window.localStorage.getItem(`article_favorite_${id}`);
      this.isFavorited = storedItem === "true";
    });
  },

  methods: {
    handleSuccess(file, fileList) {
      file[0].url = this.$axios.defaults.baseURL + file[0].url;
      this.cmtForm.pics.push(file[0]);
    },
    handleRemove(file, fileList) {
      this.cmtForm.pics = fileList;
    },
    beforeUpload(file) {
      const type = file.type;
      const isverify = [
        "image/png",
        "image/jpeg",
        "image/jpg",
        "image/gif",
      ].includes(type);

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isverify) {
        this.$message.error("上传图片格式只支持 jpg、png、gif 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }

      return isverify && isLt2M;
    },
    handleCmtSubmit() {
      const {
        api,
        user: { userInfo },
      } = this.$store.state;

      this.cmtForm = {
        ...this.cmtForm,
        post: this.$route.query.id,
      };

      if (this.cmtForm.content.trim() == "" && this.cmtForm.pics.length == 0) {
        this.$message.error("评论的内容不能为空");
        return;
      }

      this.$axios({
        url: api.COMMENTS,
        method: "POST",
        data: this.cmtForm,
        headers: {
          Authorization: `Bearer ${userInfo.token}`,
        },
      }).then((res) => {
        const { message, status } = res.data;
        if (status == 0) {
          this.$message({
            message,
            type: "success",
          });

          this.cmtForm = {
            content: "",
            pics: [],
          };

          this.getComments();
        }
      });
    },

    handlePictureCardPreview(file) {
      console.log(file);
      if (file.response) {
        file = file.response[0];
      }
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleReply(comment) {
      this.reply = comment.account;
      this.cmtForm.follow = comment.id;
      window.scrollTo(0, this.$refs.cmtInput.offsetTop);
    },

    handleCloseReply() {
      this.reply = {};
      this.cmtForm.follow = "";
    },

    getComments() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.$route.query.id,
          _start: this.start,
          _limit: this.limit,
        },
      }).then((res) => {
        const { data, total } = res.data;
        this.comments = data;
        this.commentsTotal = total;
      });
    },
    handleSizeChange(value) {
      this.limit = value;
      this.start = 0;
      this.getComments();
    },

    handleCurrentChange(value) {
      this.start = this.limit * (value - 1);
      this.getComments();
    },

    // 收藏
    handleStar() {
      // 切换收藏状态
      this.isFavorited = !this.isFavorited;
      // 将收藏状态保存到 localStorage
      let articleId = this.detail.id;
      window.localStorage.setItem(
        `article_favorite_${articleId}`,
        this.isFavorited.toString()
      );
      // 显示提示信息
      this.$message({
        message: this.isFavorited ? "已收藏" : "已取消收藏",
        type: "success",
      });
      //源代码
      // handleStar() {
      //   const {
      //     api,
      //     user: { userinfo },
      //   } = this.$store.state;

      //   this.$axios({
      //     url: api.POST_STAR,
      //     params: {
      //       id: this.detail.id,
      //     },
      //     headers: {
      //       Authorization: `Bearer ${userinfo.token}`,
      //     },
      //   }).then((res) => {
      //     const { status, message } = res.data;
      //     if (status == 0) {
      //       this.$message({
      //         message,
      //         type: "success",
      //       });
      //     }
      //   });
      // },
    },

    // 点赞
    handleLike() {
      this.likes++; // 点击时，点赞数量增加
      this.saveLikes(); // 保存点赞数量
    },
    saveLikes() {
      // 使用文章id作为键，与点赞数一起保存到LocalStorage
      localStorage.setItem(`article_likes_${this.detail.id}`, this.likes);
    },
    loadLikes(articleId) {
      // 确保在浏览器环境中执行
      if (typeof window !== "undefined") {
        const savedLikes = parseInt(
          localStorage.getItem(`article_likes_${articleId}`),
          10
        );
        if (!isNaN(savedLikes)) {
          this.likes = savedLikes;
        }
      }
      //源代码
      // handleLike(){
      //         const {api, user: {userinfo}} = this.$store.state;
      //         this.$axios({
      //             url: api.POST_LIKE,
      //             params: {
      //                 id: this.detail.id
      //             },
      //             headers: {
      //                 Authorization: `Bearer ${userinfo.token}`
      //             }
      //         }).then(res => {
      //             const {status, message} = res.data;
      //             if(status == 0){
      //                 this.$message({
      //                     message,
      //                     type: "success"
      //                 })

      //                 this.detail.like += 1;
      //             }
      //         })
      //     },
    },

    //分享
    handleShare() {
      // 显示分享对话框
      this.shareDialogVisible = true;
    },
    //复制链接到剪贴板的方法
    copyToClipboard() {
      if (navigator.clipboard) {
        // 使用 Clipboard API 复制文本
        navigator.clipboard
          .writeText(this.currentUrl)
          .then(() => {
            // 显示复制成功的消息
            this.$message({
              message: "链接已复制到剪贴板",
              type: "success",
            });
          })
          .catch((err) => {
            // 显示复制失败的消息
            console.error("复制到剪贴板失败: ", err);
            this.$message({
              message: "复制到剪贴板失败",
              type: "error",
            });
          });
      } else {
        // 如果 Clipboard API 不可用，则回退到旧行为
        const el = document.createElement("textarea");
        el.value = this.currentUrl;
        document.body.appendChild(el);
        el.select();
        try {
          var successful = document.execCommand("copy");
          var msg = successful ? "成功" : "失败";
          this.$message({
            message: `链接复制${msg}到剪贴板`,
            type: successful ? "success" : "error",
          });
        } catch (err) {
          console.error("Fallback: Oops, unable to copy", err);
          this.$message({
            message: "Fallback: Oops, unable to copy",
            type: "error",
          });
        }
        document.body.removeChild(el);
      }
    },
    
    // 推荐文章
    getPostRecmmend() {
      const { api } = this.$store.state;

      this.$axios({
        url: api.POST_RECOMMEND,
      }).then((res) => {
        const { data } = res.data;
        this.recommends = data;
      });
    },
  },

  components: {
    CommentFloor,
  },

  filters: {
    timestamp(value) {
      return moment(value).format("YYYY-MM-DD h:mm");
    },
  },

  watch: {
    $route() {
      window.location.reload();
    },
  },

  mounted() {
    const { id } = this.$route.query;

    this.$axios({
      url: `/posts/${id}`,
    }).then((res) => {
      const { data } = res;
      this.detail = data;
    });

    // 文章评论
    this.getComments(id);
    this.getPostRecmmend();
    this.currentUrl = window.location.href; // 将当前页面 URL 赋值给 currentUrl
    if (typeof window !== "undefined") {
      // 安全地使用 window 对象
    }
  },
};
</script>

<style scoped lang="less">
.container {
  width: 1000px;
  margin: 0 auto;
  padding-top: 20px;
}

.main {
  width: 700px;

  h1 {
    padding: 20px 0;
    border-bottom: 1px #ddd solid;
  }

  .post-content {
    line-height: 1.5;

    /deep/ * {
      max-width: 700px !important;
    }

    /deep/ img {
      margin: 10px 0;
    }
  }

  .post-info {
    color: #999;
    padding: 20px;
    text-align: right;

    span {
      margin-left: 20px;
    }
  }

  .post-ctrl {
    padding: 50px 0 30px;
    .ctrl-item {
      margin: 0 20px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;

      i {
        display: block;
        font-size: 30px;
        color: orange;
      }

      &:nth-child(2) {
        .i {
          transform: scale(1.4);
        }
      }
      .p {
        margin-top: 5px;
        font-size: 14px;
        color: #999;
      }
    }
  }

  /* 评论 */
  .cmt-wrapper {
    margin-bottom: 20px;
  }

  .replyTag {
    margin-bottom: 10px;
  }

  .cmt-title {
    font-weight: normal;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .cmt-input {
    margin-bottom: 10px;
  }

  .cmt-input-ctrls {
    margin-bottom: 30px;
    /deep/ .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }

    /deep/ .el-upload-list {
      li {
        width: 100px;
        height: 100px;
      }

      img {
        object-fit: cover;
      }
    }
  }

  .cmt-empty {
    color: #999;
    font-size: 14px;
    text-align: center;
    padding: 30px 0;
    border: 1px #ddd dashed;
  }

  .cmt-list {
    border: 1px #ddd solid;
  }

  .cmt-item {
    border-bottom: 1px #ddd dashed;
    padding: 20px 20px 5px;

    &:last-child {
      border-bottom: none;
    }

    .cmt-content {
      padding: 0 0 0 30px;
    }

    .cmt-info {
      margin-bottom: 10px;
      font-size: 12px;
      color: #666;

      * {
        vertical-align: top;
      }

      img {
        width: 16px;
        height: 16px;
        border-radius: 50%;
      }

      i {
        color: #999;
      }
      span {
        float: right;
      }
    }
    .cmt-message {
      margin-top: 10px;
    }

    .cmt-pic {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      overflow: hidden;
      margin-right: 5px;
      margin-top: 10px;
      padding: 5px;
      border: 1px #ddd dashed;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
      }
    }

    /*  这里和comment floor不一样，鼠标在最新内容上才hover */
    .cmt-new:hover {
      .cmt-ctrl {
        * {
          display: inline;
        }
      }
    }

    .cmt-ctrl {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #1e50a2;
      text-align: right;

      * {
        display: none;
      }

      a:hover {
        text-decoration: underline;
      }
    }
  }
}

/* 侧边栏 */
.aside {
  width: 280px;

  .aside-title {
    font-weight: normal;
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px #ddd solid;
  }

  .recommend-item {
    display: block;
    padding: 20px 0;
    border-bottom: 1px #ddd solid;

    .post-imgText {
      height: 80px;

      .post-img {
        width: 100px;
        height: 80px;
        flex-shrink: 0;
        background: #ddd;
        overflow: hidden;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .post-text {
        flex: 1;
        position: relative;
        div {
          position: relative;
          line-height: 1.4em;
          /*设置容器高度为3倍行高就是显示3行*/
          height: 2.8em;
          overflow: hidden;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
        }

        p {
          position: absolute;
          bottom: 0;
          left: 0;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>
